﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid with knockout.js.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
       <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();

            var initialData = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { name: "Brooding Dragon", sales: 0, price: 6350 },
                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];

            var GridModel = function (items) {
                this.items = ko.observableArray(items);

                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
                        this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                    }
                };

                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
                };

                this.updateItem = function () {
                    // update the first item.
                    var item = {};
                    item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
                    item.sales = Math.floor(Math.random() * 500);
                    item.price = Math.floor(Math.random() * 200);
                    this.items.replace(this.items()[0], item);
                };
            };

            var model = new GridModel(initialData);
            ko.applyBindings(model);

            var source = {
                localdata: model.items,
                datatype: 'local'
            }

            $('#addButton').jqxButton({ theme: theme });
            $('#removeButton').jqxButton({ theme: theme });
            $('#updateButton').jqxButton({ theme: theme });

            // create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                autoheight: true,
                theme: theme,
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem" value="Add Item"/>
            <input id="removeButton" type="button" data-bind="click: removeItem" value="Remove Item"/>
            <input id="updateButton" type="button" data-bind="click: updateItem" value="Update Item"/>
       </div>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>
